<template>
	<div>
		<div class="user-manager__header">
			<div class="title">
				<section-title name="后台用户列表" />
			</div>
			<div class="operation">
				<el-button type="primary" icon="el-icon-plus" @click="addInfo">新增用户</el-button>
				<el-button type="danger" icon="el-icon-minus">批量删除</el-button>
			</div>
		</div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="id" label="编号" width="180"></el-table-column>
			<el-table-column prop="account" label="账号" width="180"></el-table-column>
			<el-table-column prop="name" label="用户名" width="180"></el-table-column>
			<el-table-column prop="sex" label="性别" width="180"></el-table-column>
			<el-table-column prop="phone" label="手机号" width="180"></el-table-column>
			<el-table-column prop="createTime" label="注册日期" width="320"></el-table-column>
			<el-table-column prop="jur" label="权限" width="220"></el-table-column>
			<el-table-column prop="city" label="操作" width="180">
				<template slot-scope="scope">
					<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
					<el-divider direction="vertical"></el-divider>
					<el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 编辑弹出框 -->
		<el-dialog title="编辑" :visible.sync="dialogVisible" width="30%">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="编号">
					<el-input v-model="form.id" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="账号">
					<el-input v-model="form.account" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="用户名">
					<el-input v-model="form.name"></el-input>
				</el-form-item>

				<el-form-item label="手机号">
					<el-input v-model="form.phone"></el-input>
				</el-form-item>
				<el-form-item label="性别">
					<el-radio v-model="radio" label="男">男</el-radio>
					<el-radio v-model="radio" label="女">女</el-radio>
				</el-form-item>
				<el-form-item label="权限管理">
					<el-radio-group v-model="radio1">
						<el-radio-button label="超级管理员"></el-radio-button>
						<el-radio-button label="管理员"></el-radio-button>
						<el-radio-button label="VIP用户"></el-radio-button>
						<el-radio-button label="普通用户"></el-radio-button>
					</el-radio-group>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="editSubmit">立即修改</el-button>
					<el-button @click="dialogVisible = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<!-- 添加弹出框 -->
		<el-dialog title="添加" :visible.sync="dialogVisible1" width="30%">
			<el-form ref="form1" :model="form1" label-width="80px" :rules="formRules">
				<!-- <el-form-item label="头像:">
					<avatar-upload
						v-model="form1.avatar"
						action="http://localhost:8080/upload"
						name="file"
						style="margin-left:60px"
					/>
				</el-form-item>-->
				<el-form-item label="用户名" prop="name">
					<el-input v-model="form1.name"></el-input>
				</el-form-item>
				<el-form-item label="账号" prop="account">
					<el-input v-model="form1.account"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="pass">
					<el-input v-model="form1.pass" type="password"></el-input>
				</el-form-item>
				<el-form-item label="手机号" prop="phone">
					<el-input v-model="form1.phone"></el-input>
				</el-form-item>
				<el-form-item label="密令" prop="passCode">
					<el-input v-model="form1.passCode" type="password"></el-input>
				</el-form-item>
				<P style="font-size:12px;color:red;padding-left:80px">注：密令为个人信息及密码修改的唯一凭证，请严格保管！</P>
				<el-form-item label="性别">
					<el-radio v-model="radio2" label="男">男</el-radio>
					<el-radio v-model="radio2" label="女">女</el-radio>
				</el-form-item>
				<el-form-item label="权限">
					<el-radio-group v-model="radio3">
						<el-radio-button label="超级管理员" :disabled="desiab()"></el-radio-button>
						<el-radio-button label="管理员" :disabled="desiab()"></el-radio-button>
						<el-radio-button label="VIP用户" :disabled="desiab()"></el-radio-button>
						<el-radio-button label="普通用户" :disabled="desiab()"></el-radio-button>
					</el-radio-group>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="addData">立即添加</el-button>
					<el-button @click="dialogVisible1 = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import tableMng from '@/utils/tableMng'
import AvatarUpload from '@/components/business/upload/avatar-upload'
import { getUserList, editInfo, register, dele } from '@/api/request'
export default {
	name: 'Permission',
	components: {
		AvatarUpload,
	},
	data() {
		const validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'))
			} else if (!/\d/.test(value) || !/[a-zA-Z]/.test(value)) {
				callback(new Error('密码至少要包含数字和字母'))
			}
		}
		return {
			info: window.JSON.parse(window.sessionStorage.getItem('info')),
			radio1: '超级管理员',
			radio: '男',
			radio3: '普通用户',
			radio2: '',
			tableMng,
			key: 1,
			tableData: [],
			dialogVisible: false,
			dialogVisible1: false,
			form: {
				account: '',
				id: '',
				phone: '',
				name: '',
			},
			form1: {
				account: '',
				phone: '',
				name: '',
				pass: '',
				passCode: '',
				avatar: '',
			},
			formRules: {
				name: [
					{
						required: true,
						message: '用户名不能为空',
						trigger: 'blur',
					},
				],
				account: [
					{
						required: true,
						message: '账号不能为空',
						trigger: 'blur',
					},
				],
				code: [
					{
						required: true,
						message: '验证码不能为空',
						trigger: 'blur',
					},
				],
				passCode: [
					{
						required: true,
						message: '密令不能为空',
						trigger: 'blur',
					},
					{
						pattern: /^[\w]{8,18}$/,
						message: '密令格式不正确',
						trigger: 'blur',
					},
				],
				pass: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'blur',
					},
					{
						validator: validatePass,
						trigger: 'blur',
					},
					{
						min: 6,
						max: 20,
						message: '密码长度为6~20位',
						trigger: 'blur',
					},
				],
				phone: [
					{
						required: true,
						message: '请填写手机号',
						trigger: 'blur',
					},
					{
						pattern: /^1[345789]\d{9}$/,
						message: '手机号码格式不正确',
						trigger: 'blur',
					},
				],
			},
		}
	},
	async created() {
		await this.getData()
	},
	computed: {
		// userInfo() {
		// 	return this.$store.state.account.userInfo
		// },
		// currentRoles: {
		// 	get() {
		// 		return this.userInfo.roles
		// 	},
		// 	set(value) {
		// 		this.$store.commit('SET_USER_INFO', { ...this.userInfo, roles: value })
		// 		this.key++ //重新渲染DOM
		// 	},
		// },
	},
	methods: {
		// 是否禁用按钮
		desiab() {
			let u_jurisdiction = this.info.u_jurisdiction
			if (u_jurisdiction === 'ordinary' || u_jurisdiction === 'vip' || u_jurisdiction === 'admin') {
				return true
			} else {
				return false
			}
		},
		// 获取数据
		async getData() {
			let res = await getUserList()
			// console.log(res)
			if (res.state === 'OK') {
				let data = res.data
				data.forEach((el, i) => {
					let jur = el.jurisdiction
					if (jur === 'ordinary') {
						el.jur = '普通用户'
					}
					if (jur === 'vip') {
						el.jur = 'VIP用户'
					}
					if (jur === 'admin') {
						el.jur = '管理员'
					}
					if (jur === 'superAdmin') {
						el.jur = '超级管理员'
					}
				})
				// console.log(data)
				this.tableData = data
			} else {
				this.$message.error(res.data)
			}
		},
		// 点击编辑
		handleEdit(row) {
			let u_jurisdiction = this.info.u_jurisdiction
			let id = this.info.u_id
			if (id === row.id) {
			this.$message.error('修改当前账号信息请前往个人中心！')
				return false
			}
			if (u_jurisdiction === 'ordinary' || u_jurisdiction === 'vip') {
				this.$message.error('您不是管理员，不能修改数据')
				return false
			}
			if (u_jurisdiction === 'admin') {
				if (row.jurisdiction === 'superAdmin') this.$message.error('您的身份为管理员，无法修改超级管理员的信息！')
				return false
			}
			this.form.name = row.name
			this.form.id = row.id
			this.radio = row.sex
			this.form.phone = row.phone
			this.radio1 = row.jur
			this.form.account = row.account
			this.dialogVisible = true
		},
		// 确认修改数据
		async editSubmit() {
			let name = this.form.name
			let account = this.form.account
			let phone = this.form.phone
			let id = this.form.id
			let sex = this.radio
			let jur = ''
			if (this.radio1 === '普通用户') {
				jur = 'ordinary'
			}
			if (this.radio1 === 'VIP用户') {
				jur = 'vip'
			}
			if (this.radio1 === '管理员') {
				jur = 'admin'
			}
			if (this.radio1 === '超级管理员') {
				jur = 'superAdmin'
			}
			let res = await editInfo({ name, account, phone, id, jur, sex })
			if (res.state === 'OK') {
				this.$message({
					message: '修改成功!',
					type: 'success',
				})
				this.getData()
				this.dialogVisible = false
			} else {
				this.$message.error(res.data)
			}
		},
		// 添加用户
		addInfo() {
			let info = window.JSON.parse(window.sessionStorage.getItem('info'))
			let u_jurisdiction = info.u_jurisdiction
			if (u_jurisdiction === 'ordinary' || u_jurisdiction === 'vip') {
				this.$message.error('您不是管理员，不能添加数据')
				return false
			}
			this.dialogVisible1 = true
		},
		// 立即添加
		async addData() {
			let info = window.JSON.parse(window.sessionStorage.getItem('info'))
			let u_jurisdiction = info.u_jurisdiction
			if (!/^1[3456789]\d{9}$/.test(this.form1.phone)) {
				this.$message.warning('请填写正确信息')
				return false
			}
			if (!/^[\w]{8,18}$/.test(this.form1.passCode)) {
				this.$message.warning('请填写正确信息')
				return false
			}
			if (this.radio3 === '超级管理员' && u_jurisdiction === 'admin') {
				this.$message({
					message: '管理员无法添加超级管理员!',
					type: 'warning',
				})
				return false
			}
			if (
				this.form1.pass.length < 6 ||
				this.form1.pass.length > 20 ||
				this.form1.account === '' ||
				this.form1.code === '' ||
				this.radio2 === '' ||
				this.form1.name === '' ||
				this.form1.passCode === ''
			) {
				this.$message.warning('请按正确格式填写信息')
				return false
			}
			let jur = ''
			if (this.radio3 === '普通用户') {
				jur = 'ordinary'
			}
			if (this.radio3 === 'VIP用户') {
				jur = 'vip'
			}
			if (this.radio3 === '管理员') {
				jur = 'admin'
			}
			if (this.radio3 === '超级管理员') {
				jur = 'superAdmin'
			}
			let res = await register({
				u_name: this.form1.name,
				account: this.form1.account,
				password: this.form1.pass,
				phone: this.form1.phone,
				sex: this.radio2,
				jurisdiction: jur,
				passCode: this.form1.passCode,
			})
			if (res.state === 'OK') {
				this.$message.success('添加成功！')
				this.getData()
				this.dialogVisible1 = false
			} else {
				this.$message.error('添加失败，服务器无响应！')
			}
		},
		// 删除
		handleDelete(row) {
			let u_jurisdiction = this.info.u_jurisdiction
			if (u_jurisdiction === 'ordinary' || u_jurisdiction === 'vip') {
				this.$message.error('您不是管理员，不能修改数据')
				return false
			}
			if (row.jurisdiction === 'superAdmin') {
				this.$message.error('超级管理员信息无法删除！')
				return false
			}
			let id = row.id
			this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(async () => {
					let res = await dele({ id })
					if (res.state === 'OK') {
						this.$message({
							type: 'success',
							message: '删除成功!',
						})
						this.getData()
					} else {
						this.$message({
							type: 'error',
							message: '删除失败',
						})
					}
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					})
				})
		},
	},
}
</script>
<style lang="scss" scoped>
.user-manager__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;

	.title,
	.operation {
		margin-bottom: 1em;
	}
}
</style>
